<template>
	<div>
		<div class="graybg"></div>
		<div class="header header_bg">
			<div class="header_left">
				<span class="baiColor ellipsis01" >{{content.new_title}}</span>
			</div>
		</div>

		<div class="center" style="padding-top: 50px;">
			<p>全部评论</p>
			<div class="content" v-if="main">
				<section v-for="(pinglun ,index) in pingluns">
					<img :src="pinglun.u_img" />
					<div class="right">
						<div class="headers">
							<p class="headers_left">{{pinglun.u_name}}</p>
							<p class="headers_right zans" :class="{'active':pinglun.check}">
								<i @click="zans(pinglun,index)" class="iconfont" >&#xe607;</i>
								<span>{{pinglun.e_num}}</span>
							</p>
						</div>
						<p class="time">{{ pinglun.e_date | timeShift}}</p>
						<p class="PContent">
							{{pinglun.e_content}}
						</p>
					</div>
				</section>
			</div>
			<div class="contents" v-else>
				<img style="display: block;margin: auto;" src="../assets/fuwucenter.png"/>
			</div>
		</div>

		<div class="footer">
			<div class="footer_left">
				<i onclick="javascript:history.back(-1)" class="iconfont baiColor">&#xe612;</i>
			</div>
			<div class="footer_right" @click="pinglun">
				<i class="baiColor iconfont">&#xe644;</i>&nbsp;&nbsp;
				<span class="baiColor">评论</span>
			</div>
		</div>
		<!--评论框的弹出-->
		<div class="pinglunShow" v-show="isShowPing">
			<div class="kuang">
				<form action="" method="post" class="lydfrom">
					<textarea name="contentC" v-model="contentC" placeholder="留下自己的观点" rows="17" cols="45"></textarea>
				</form>
				<div class="footers" @click="xiaoShi">
					<span class="footers_left iconfont baiColor">&#xe612;</span>
					<span class="footers_right baiColor" @click="send">发送</span>
				</div>
			</div>
		</div>
		<!--评论成功的弹框-->
		<div class="pinglunShowSuccess" v-show="pingSuccess">
			<div class="succ">
				<p>新增评论成功</p>
			</div>
		</div>
		<!--评论失败的弹框-->
		<div class="pinglunShowFail" v-show="pingFail">
			<div class="succ">
				<p>评论发送失败</p>
			</div>
		</div>
	</div>
</template>

<script>
	import { timeShift } from '../js/time.js'

	export default {
		data() {
			return {
				imgURL:this.imgURL,
				main:true,
				isActive: false,
				isShowPing: false,
				pingSuccess: false,
				pingFail: false,
				zan: [],
				content: {}, //文章详情内容
				contentC: '', //评论内容
				pingluns: [], //所有的评论
			}
		},
		filters: {
			timeShift(time) {
				var times = time;	//时间戳
				var separate = "-"	//年-月-日之间的分隔符
				var timeLayout = 1;	//1->年 月 日 时 分 秒 2->时 分 秒 3->年 月 日
				return timeShift(times,separate,timeLayout);
			}
		},
		components: {},
		mounted: function() {
			let _this = this;
			//先获取文章详情（主要是要文章的标题）
			var str=window.location.href;
			var num=str.lastIndexOf("/")+1;
			var new_id = str.substring(num);
			var info = window.localStorage.data;
			var params = new URLSearchParams();
			params.append('token', info);
			params.append('id', new_id);
			this.$axios({
				url: "Home/New/new_xq",
				method: "POST",
				data: params
			}).then((res) => {
				if(res.data.code == 1) {
					this.content = res.data.data;
				}
			}).catch((err) => {
				console.log(err)
			})

			//获得所有评论的内容
			params.append('id', this.$route.params.id)
			this.$axios({
				url: "Home/New/new_common_list",
				method: "POST",
				data: params
			}).then((res) => {
				if(res.data.code == 1) {
					this.main = true
					var datas = res.data.data
					this.pingluns = datas
					this.pingluns.forEach(function(eachs) {
						if(eachs.iszan != null) {
							if(typeof eachs.check == "undefined") {
								_this.$set(eachs, 'check', true)
							}
						}
					});
				}else if(res.data.code == 2){
					this.main = false
				}
			}).catch(function(err) {
				console.log(err)
			})
			//获取头像和名字
			params.append('token', info);	//客户秘钥（信息）
			var arr = ['u_name','u_img']
			params.append('arr', arr);
			this.$axios({
				url: "Home/Config/getUserField",
				method: "POST",
				data: params
			}).then((res) => {
				if(res.data.code == 1){
					this.infos = res.data.data
				}
			}).catch((err) => {
				console.log(err)
			})
		},
		methods: {
			//列表点赞/取消
			zans: function(pinglun, index) {
				var _this = this;
				var info = window.localStorage.data;
				var params = new URLSearchParams();
				if(typeof _this.pingluns[index].check == "undefined" || _this.pingluns[index].check == false) {
					//点赞
					let id = _this.pingluns[index].e_id;
					_this.pingluns[index].e_num++;
					params.append('type', 2);
					params.append('id', id);
					params.append('token', info);
					this.$axios({
						url: "Home/New/new_zan",
						method: "POST",
						data: params
					}).then((res) => {
						_this.$set(pinglun, 'check', true);
					}).catch(function(err) {
						console.log(err)
					});
					//点赞结束	
				} else if(_this.pingluns[index].check == true) {
					//取消赞
					let id = _this.pingluns[index].e_id;
					_this.pingluns[index].e_num--;
					params.append('type', 2);
					params.append('id', id);
					params.append('token', info);
					this.$axios({
						url: "Home/New/del_zan",
						method: "POST",
						data: params
					}).then((res) => {
						_this.pingluns[index].check = false
						//需要变色
					}).catch(function(err) {
						console.log(err)
					});
				}
			},

			//发送评论
			send: function() {
				if(this.contentC.length != 0) {
					//把评论内容提交后台
					var info = window.localStorage.data;
					var params = new URLSearchParams();
					params.append('token', info);	//客户秘钥（信息）
					params.append('id', this.$route.params.id)
					params.append('content', this.contentC)
					//发送评论
					this.$axios({
						url: "Home/New/comment",
						method: "POST",
						data: params
					}).then((res) => {
						if(res.data == 1) {
							//评论成功
							this.isShowPing = false;
							this.pingSuccess = true;
							setTimeout(() => {
								this.pingSuccess = false;
							}, 1500)
							var obj = {
								e_content : this.contentC,
								u_name:this.infos.u_name,
								u_img:this.infos.u_img,
								e_num:'0',
							}
							this.pingluns.push(obj);

						}
					}).catch(function(err) {
						console.log(err)
					})
				} else {
					//评论失败
					this.isShowPing = false;
					this.pingSuccess = false;
					this.pingFail = true;
					setTimeout(() => {
						this.pingFail = false;
					}, 1000)
				}
			},

			//点击评论出现的弹框
			pinglun: function() {
				this.isShowPing = true;
			},

			xiaoShi: function() {
				window.event.returnValue = false;
				this.isShowPing = false;
			},
		}
	}
</script>

<style scoped="scoped">
	@import "../css/public.css";
	@import "../css/iPingLun.css";
	.baiColor {
		font-size: 15px;
	}
	
	.active {
		color: #FFBA01 !important;
	}
</style>